<template>
  <div id="link">
    <div class="line-10"></div>
    <dl>
      <dt><i class="el-icon-link mr-5"></i><span class="bold">友情链接</span></dt>
      <div class="line"></div>
      <template v-for="item in link">
        <dd>
          <el-link :href="item.linkUrl" :underline="false" target="_blank" :key="item.id"
                   :title="item.linkName">{{item.linkName}}
          </el-link>
        </dd>
      </template>
    </dl>
  </div>
</template>

<script>

  export default {
    name: "Link",
    data() {
      return {
        link: [],
      }
    },
    methods: {
      async getLinkList() {
        this.link = await this.$common.linkList()
      },
    },
    mounted() {
      this.getLinkList()
    }
  }
</script>

<style scoped>

  dd {
    width: 45%;
    display: inline-block;
  }

  a {
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
  }
</style>
